﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet"/>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.js"></script>
    <script src="knockout-3.0.0.js"></script>
    <script src="ViewModel.js"></script>
</head>
<body>
<div id="content">
    <table class="table table-striped">
        <thead>
        <tr>
            <th>姓名</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>地址</th>

        </tr>
        </thead>
        <tbody data-bind="foreach:contacts">
        <tr>
            <td data-bind="text:Name"></td>
            <td data-bind="text:PhoneNo"></td>
            <td data-bind="text:EmailAddress"></td>
            <td data-bind="text:Address"></td>
            <td ><a href="#" data-bind="click:$root.showDialog"> 修改</a>
                <a href="#" data-bind="click:$root.delete"> 删除</a>
            </td>
        </tr>
        </tbody>
    </table>
    <a href="#" class="btn btn-primary" data-bind="click:showDialog"> 添加联系人</a>
</div>
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4>编辑联系人信息</h4>
            </div>
            <div class="modal-body  form-horizontal" data-bind="with:contact">
                <div class="form-group">
                    <label for="name" class="col-sm-2  control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="name" placeholder="姓名" data-bind="value:Name" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2  control-label">电话</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="phoneNo" placeholder="电话" data-bind="value:PhoneNo" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2  control-label">邮箱</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="emailAddress" placeholder="邮箱" data-bind="value:EmailAddress" />
                    </div>
                </div>

                <div class="form-group">
                    <label for="name" class="col-sm-2  control-label">地址</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="address" placeholder="地址" data-bind="value:Address" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn btn-default" data-dismiss="modal">关闭</a>
                <a href="#" class="btn btn-primary" data-bind="click: save">保存</a>
            </div>
        </div>
    </div>
</div>

</body>
</html>
